<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화
		var cfg = {
				chart: {
					type: 'funnel',
					marginRight: 100
				},
				title: {
					text: 'Sales funnel',
					x: -50					// marginRight:100 때문에 타이틀 위치를 이동
				},
				plotOptions: {
					series: {
						dataLabels: {
							enabled : true,
							formatter: function() {
								return '<b>' + this.point.name + '</b>' + " (" + this.y + ")";
							},
							color: 'black',
							softConnector: true
						},
						neckWidth: '30%',		// 퍼지는 부분의 넓이
						neckHeight: '25%'		// 퍼지는 부분의 높이
					}
				},
				legend: {
					enabled: false
				},
				series: [{
					name: 'Unique users',
					data: [
					      ['Website visits',		15654],
					      ['Downloads',				4046],
					      ['Requested price list',	1987],
					      ['Invoice sent',			976],
					      ['Finalized', 			846]
					]
				}]
		};
		
		myChart.SetOptions(cfg);
		myChart.Draw();
	});
</script>
<title>Funnel Chart 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>
	<div id="title">Funnel Chart 예제</div>
	<div id="desc">
		깔대기 형상의 퍼센트 바 차트를 통해 변동 추이를 보여준다.
	</div>

	<div id="functionArea">
		chart: {<br>
	    &nbsp;&nbsp;&nbsp;&nbsp;Type : "<font color="#FF0000">funnel</font>",<br>
	    }<br>
	    .<br>
	    .<br>
        <br>
        series: [{<br>
		&nbsp;&nbsp;&nbsp;&nbsp;upColor:"#FF8080",<br>
		&nbsp;&nbsp;&nbsp;&nbsp;color:"#8080FF"<br>
		&nbsp;&nbsp;&nbsp;&nbsp;.<br>
	    &nbsp;&nbsp;&nbsp;&nbsp;.<br>
        }]
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "1000px", "400px");
		</script>
	</div>
</div>
</body>
</html>